<template>
    <div class="empty">
        <div class="img">
            <img src="../../../assets/images/empty.png">
        </div>
        <div class="text" v-if="showEmpty">{{text}}</div>
        <div class="onlogin" v-else :style="{'color':Color}">
            <span :style="{'border-color':Color}" @click="goLogin">去登录</span>
        </div>
    </div>
</template>

<script>
export default {
    name: 'ReleaseEmpty',
    props: {
        showEmpty: {
            type: Boolean
        },
        text: {
            type: String
        }
    },
    methods: {
        goLogin() {
            this.$router.push('/login')
        }
    },
    computed: {
        Color() {
            return this.$store.state.colorItem[this.$store.state.colorIndex].color
        }
    }
}
</script>

<style scoped>
.empty{
    width:100vw;
    height:calc(100vh - 1rem);
}
.empty .img{
    padding-top:10vh;
}
.empty .img img{
    width:100%;
}
.empty .text{
    font-size:0.36rem;
    font-weight:600;
    color:#666;
    text-align: center;
}
.empty .onlogin{
    font-size:0.4rem;
    font-weight:600;
    text-align: center;
}
.empty .onlogin span{
    padding:0.16rem 0.2rem;
    border:0.04rem solid;
    border-radius:0.2rem;
}
</style>